<!--  -->
<template>
  <el-table
    :data="tableBodyData"
    height="100%"
    style="width: 100%"
    :header-row-class-name="'ik-list-table-header-row'"
    :header-cell-class-name="'ik-list-table-header-cell'"
    :row-class-name="'ik-list-table-body-row'"
    :cell-class-name="'ik-list-table-body-cell'"
    border
    stripe
    fit
  >
    <!-- :row-class-name="tableRowClassName" -->
    <el-table-column
      v-for="i in tableHeadData"
      :key="i.key"
      :prop="i.key"
      :label="i.label"
      min-width="180"
      show-overflow-tooltip
      align="center"
    />

  </el-table>
</template>

<script>

export default {
  components: {},
  props: {
    tableHeadData: {
      type: Array,
      default: () => {
        return [
          {
            label: '日期',
            key: 'date'
          },
          {
            label: '姓名',
            key: 'name'
          },
          {
            label: '地址',
            key: 'address'
          }
        ]
      }
    },
    tableBodyData: {
      type: Array,
      default: () => {
        return [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    }
  },
  data() {
    return {
    }
  },
  computed: {
    // tableData() {
    //   return this.tableBodyData
    // }
  },
  watch: {
    // tableBodyData(val, oldval) {
    //
    //   this.tableData = val
    // }
  },
  created() {

  },
  mounted() {

  },

  methods: {
    tableRowClassName({ row, rowIndex }) {
      return 'tableRow'
    }

  }
}
</script>
<style lang='scss' scoped>
::v-deep.el-table{
  .tableRow{
    height: 50px;
    line-height: 50px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

}
</style>
<style>
  /* 表格样式 */
  .ik-list-table-header-row .ik-list-table-header-cell {
    padding:0;
    height: 40px;
    line-height: 40px;
    background-color: #F4F7FC;
    color:#555555;
    border-color: #E7E7E7;

  }
  .ik-list-table-header-row .ik-list-table-header-cell> .cell{
    text-overflow:ellipsis ;
    white-space: nowrap;
  }
  .ik-list-table-body-row {
    padding:0;
    height: 30px;
    line-height: 30px;
  }
  .ik-list-table-body-row .ik-list-table-body-cell {
    padding:0;
    height: 40px;
    line-height: 40px;
  }
</style>
